<template>
    <editor v-model="localContent" @init="editorInit" :lang="lang" :options="editorOptions" :width="width" :height="height" :theme="theme" @input="handleInput"></editor>
</template>

<script>



import Editor from 'vue2-ace-editor'

export default {
    name:'LAceEditor',
    components:{Editor},
    mixins:[],
    props:{
        height:{
            type:String,
            default:'300px',
        },
        width:{
            type:String,
            default:'100%'
        },
        lang:{
            type:String,
            default:'text'
        },
        content:{
            type:String,
            default:''
        },
        theme:{
            type:String,
            default:'chrome'
        },
        readOnly:{
            type:Boolean,
            default:false
        }

      
    },
    data(){
        return{
            editorOptions: {
                // 设置代码编辑器的样式
                enableBasicAutocompletion: true, //启用基本自动完成
                enableSnippets: true, // 启用代码段
                enableLiveAutocompletion: true, //启用实时自动完成
                tabSize: 4, //标签大小
                fontSize: 18, //设置字号
                showPrintMargin: false, //去除编辑器里的竖线
                showLineNumbers: true, // 显示行号
                scrollPastEnd: true, // 滚动位置
                highlightActiveLine: true, // 高亮当前行
                wrap: true, 
                readOnly:this.readOnly

            },
            localContent: this.content
        }
    },

    methods:{
        
        editorInit() {
          
            require('brace/theme/cobalt')//这里要与上面的theme对应
            require('brace/theme/chrome')
            require('brace/theme/clouds')
            require('brace/theme/dracula')
            require('brace/theme/dreamweaver')
            require('brace/theme/eclipse')
            require('brace/theme/github')
            require('brace/theme/gob')
            require('brace/theme/iplastic')
            require('brace/theme/ambiance')
            require('brace/theme/tomorrow_night_bright')
            
            require('brace/ext/language_tools')//language extension prerequsite...
            require("brace/ext/emmet")
            require("brace/ext/beautify")
            require("brace/ext/searchbox")
            require("brace/ext/chromevox")
            require("brace/ext/error_marker")
            require("brace/ext/keybinding_menu")
            require("brace/ext/linking")
            require("brace/ext/modelist")
            require("brace/ext/old_ie")
            require("brace/ext/settings_menu")
            require("brace/ext/spellcheck")
            require("brace/ext/split")
            require("brace/ext/static_highlight")
            require("brace/ext/statusbar")
            require("brace/ext/whitespace")
            require("brace/ext/textarea")
            require("brace/ext/themelist")

            require('brace/mode/html')
            require('brace/mode/yaml')
            require('brace/mode/json')
            require('brace/mode/less')
            require('brace/snippets/json')
            require('brace/mode/lua')
            require('brace/snippets/lua')
            require('brace/mode/javascript')
            require('brace/snippets/javascript')
        },
        handleInput(c){
            this.$emit('change', c)
        },
        setContent(c){
            this.localContent=c
        }

       
    },
    mounted(){
        

    }

}
</script>


<style scoped>
.codeEditBox{
    width:100%;
    height:60vh;
    border:1px solid #dcdee2;
}
</style>